<template>
  <div class="content">
    <div class="info-sort-search">
      <el-input placeholder="请输入病例编号" class="input-with-select" v-model="keywords">
        <el-button slot="append" icon="el-icon-search" class="info-sort-search-btn" @click="searchClick">搜索</el-button>
      </el-input>
    </div>
    <div v-for="(item, index) in similarData" :key="index" class="similar-item">
      <el-card shadow="hover" labelStyle>
        <el-descriptions>
          <template slot="title">
            <p>病历编号：{{ item.id }}</p>
          </template>
          <el-descriptions-item label="主诉" label-class-name="similar-label">{{ item.main }}</el-descriptions-item>
          <el-descriptions-item label="现病史" label-class-name="similar-label">{{ item.presents }}</el-descriptions-item>
          <el-descriptions-item label="治疗方案" label-class-name="similar-label">{{ item.therapy }}</el-descriptions-item>
          <el-descriptions-item label="备注" label-class-name="similar-label">
            <div v-for="(tag, tagIndex) in tagData[index]" :key="tagIndex">
              <div v-on:click="toWordCloud(tag.id)" class="similar-tag">
                <el-tag size="small">{{ tag.name }}</el-tag>
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="既往史" label-class-name="similar-label">{{ item.history }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div id="similar-empty" v-on:click="emptyJump">
      <el-empty description="该病历无相似病历，请重新选择"></el-empty>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'CaseSimilar',
  data () {
    return {
      similarData: [],
      tagData: [],
      keywords: '',
      caseId: ''
    }
  },
  updated () {
    let empty = document.getElementById('similar-empty')
    if (this.similarData.length === 0) {
      empty.style.display = 'block'
    } else {
      empty.style.display = 'none'
    }
  },
  mounted () {
    // this.loadInfo()
    console.log(this.$route.query.id)
    this.caseId = this.$route.query.id
    if (this.caseId === undefined) {
      this.caseId = Vue.prototype.GLOBAL.tgCaseId
    }
    if (this.caseId !== '') {
      this.loadSimilarCase(this.caseId)
      let empty = document.getElementById('similar-empty')
      if (this.similarData.length === 0) {
        empty.style.display = 'block'
      } else {
        empty.style.display = 'none'
      }
    }
  },
  methods: {
    loadSimilarCase (id) {
      var _this = this
      this.$axios
        .get('/case/similarities', {
          params: {
            id: id
          }
        })
        .then(
          successResponse => {
            console.log(successResponse.data.data)
            _this.similarData = successResponse.data.data[0]
            _this.tagData = successResponse.data.data[1]
          }
        )
        .catch(
          failResponse => {
            console.log(failResponse.msg)
          }
        )
    },
    searchClick () {
      this.loadSimilarCase(this.keywords)
    },
    emptyJump () {
      this.$router.push('/case/info')
    },
    toWordCloud (id) {
      Vue.prototype.GLOBAL.tgDisId = id
      this.$router.push('/case/wordCloud')
    }
  }
}
</script>

<style scoped>
.content /deep/ .similar-label {
  color: #42b983 !important;
}

.similar-item {
  margin-top: 3px;
}

.info-sort-search {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  width: 35%;
}

.info-sort-search-btn {
  background-color: #3894ff !important;
  color: white !important;
  border-radius: 0;
}

#similar-empty {
  cursor: pointer;
}

.similar-tag {
  cursor: pointer;
}
</style>
